

<template>
  <section class="sale-item">
      <section class="sale-item-thumb">
          <img :src="saleItem.thumb" alt="">
      </section>
      <section class="sale-item-detial">
          <h4 class="sale-item-detial-syear">{{saleItem.syear}}</h4>
          <h4 class="sale-item-detial-gift">{{saleItem.gift}}</h4>
          <span class="sale-item-detial-price">￥{{saleItem.price}}</span>
          <section class="sale-item-detial-mail">{{saleItem.mail}}</section>
          <section class="sale-item-detial-num">销量：{{saleItem.num}}件
              <span class="sale-item-detial-num-shop">{{saleItem.shop}}</span>
          </section>
          
      </section>
  </section>
</template>
<script>
export default {
  props:['sale-item']
}
</script>
<style lang="scss">
@import "../../../../assets/scss/_index.scss";
.sale-item{
    display: flex;
    // justify-content: space-around;
    align-items: center;
    width: 100%;
    height: px2rem(200);
    background: #fff;
    margin-bottom: px2rem(20);
    &-thumb{
        width: px2rem(192);
        height: px2rem(119);
        margin-left: px2rem(36);
        img{
            width: 100%;
        }
    }
    &-detial{
        margin-left: px2rem(20);
        &-syear{
            font-size: px2rem(22);
            color: #535353;
            margin-bottom: px2rem(10);
        }
        &-gift{
             font-size: px2rem(22);
             color: #535353;
             margin-bottom: px2rem(14);
        }
        &-price{
            font-size: px2rem(18);
            color: #e23f42;
       
        }
        &-mail{
            display: inline-block;
            font-size: px2rem(16);
            color: #d9d9d9;
            margin-left: px2rem(12);
            margin-bottom: px2rem(16);
        }
        &-num{
            font-size: px2rem(18);
            color: #d9d9d9;
            &-shop{
            font-size: px2rem(18);
            color: #9f9d9d;
            margin-left: px2rem(26);
            }
        }
        
    }
}
</style>
